import React, {FC, useEffect, useState} from 'react';
import {View} from '@ant-design/react-native';
import {Image, StyleSheet, ScrollView} from 'react-native';
import {TBlogRemark} from '../../type/TBlog';
import axios from '../../http/http';
import UnitText from '../../component/UnitText';
import {formatTime} from '../../util/util';
const Remark: FC<{blogId: number}> = ({blogId}) => {
  const [remarkList, setRemarkList] = useState<TBlogRemark[]>([]);
  const getRemarkList = () => {
    axios
      .get('/comment/search', {
        params: {
          blogId,
        },
      })
      .then(res => {
        console.log(res.data);
        res.error === -1 && setRemarkList(res.data);
      });
  };
  useEffect(() => {
    getRemarkList();
  }, []);
  return (
    <>
      <View style={styles.remarkPlane}>
        {remarkList.length > 0 &&
          remarkList.map(item => (
            <View key={item.id} style={styles.remarkBox}>
              <View style={styles.avatar}>
                <Image
                  style={{width: 40, height: 40, borderRadius: 40}}
                  source={{uri: item.avatar}}
                />
              </View>
              <View>
                <View>
                  <UnitText TStyle={{fontSize: 16, color: '#51a5f2'}}>
                    {item.realname}
                  </UnitText>
                  <UnitText TStyle={{fontSize: 11, color: '#888'}}>
                    {formatTime(item.time)}
                  </UnitText>
                </View>
                <View>
                  <UnitText TStyle={{color: '#333', marginTop: 10}}>
                    {item.content}
                  </UnitText>
                </View>
              </View>
            </View>
          ))}
      </View>
    </>
  );
};
const styles = StyleSheet.create({
  remarkPlane: {
    backgroundColor: '#fff',
  },
  remarkBox: {
    display: 'flex',
    margin: 20,
    flexDirection: 'row',
  },
  avatar: {
    marginRight: 10,
  },
  header: {},
  content: {},
});
export default Remark;
